<script setup lang="ts">
import { computed } from 'vue'
import {
  NIcon,
  NAvatar
} from 'naive-ui'
import UserService from '@/services/user.service'

import {
  PersonCircle24Regular as Avator
} from '@vicons/fluent'
const userService = new UserService()
const loginHideHeader = computed(() => userService.showAvator.value)

function userCenter () {
  userService.showUserCenter.value = true
}

</script>

<template>
  <n-avatar :size="60" v-if="loginHideHeader">
    <n-icon>
      <Avator @click="userCenter" />
    </n-icon>
  </n-avatar>
</template>

<style lang="less">
.n-avatar {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 90;
  font-size: 40px;
  width: 60px;
  height: 60px;
  background-color: transparent;
  color: #7A64A4;
  cursor: pointer;

  .n-avatar__text {
    .n-icon {
      width: 60px;
      height: 60px
    }

  }
}
</style>
